<template>
  <div>
    <vue-office-pdf :src="pdf" style="height: 80vh;" :lazy="true" @rendered="renderedHandler" @error="errorHandler" />
    <button @click="test(1)">
      放大
    </button>
    <button @click="test(0)">
      缩小
    </button>
  </div>
</template>

<script>
// 引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'

export default {
  components: {
    VueOfficePdf
  },
  data () {
    return {
      // pdf: 'http://static.shanhuxueyuan.com/test.pdf' // 设置文档地址
      //  pdf:'http://127.0.0.1:8014/HXCloud/test1.pdf'
      pdf: 'http://127.0.0.1:8014/HXCloud/test2.pdf'
    }
  },
  mounted () {
    // this.test1()
  },
  methods: {
    zoomIn () {
      if (this.scale < this.maxScale) {
        this.scale += 0.1
        console.log('this.scale', this.scale)
        this.renderPage(this.pageNum)
      }
    },
    zoomOut () {
      if (this.scale > this.minScale) {
        this.scale -= 0.1
        console.log('this.scale', this.scale)
        this.renderPage(this.pageNum)
      }
    },
    renderedHandler () {
      console.log('渲染完成')
    },
    errorHandler () {
      console.log('渲染失败')
    },
    test (type) {
      if (type === 0) {
        console.log('缩小')
      } else {
        console.log('放大')
      }
    }
  }
}
</script>
